<template>
    <div class="app-container">
      <div class="container">
        <h1 class="main-title">
          windows客户端下载
        </h1>
  
        <div class="download-section">
          <el-button type="primary" size="large" @click="downloadSoftware">
            <i class="el-icon-download" /> 下载软件包
          </el-button>
          <p class="version-info">
            版本：V1.0.0
          </p>
        </div>
  
        <div class="content-section">
          <h2>【说明】</h2>
          <p>下载解压后免安装，打开EXE程序直接使用。</p>
          <p>以下能力源码在OCR-data文件夹中：</p>
          <ul class="feature-list">
            <li>文本语义智能校对</li>
            <li>深度学习能力</li>
            <li>数据预处理</li>
            <li>模型训练</li>
            <li>模型评估与优化</li>
            <li>文本生成</li>
            <li>繁体中文和竖排印刷体文字识别</li>
            <li>手写体文字 OCR 识别</li>
            <li>识别文档校验</li>
          </ul>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'MultiPlatformSupport',
    data() {
      return {
        downloadUrl: '/static/software/OCR客户端-解压后直接运行exe即可.zip' // 软件包的路径
      }
    },
    methods: {
      downloadSoftware() {
        // 创建一个隐藏的a标签来触发下载
        const link = document.createElement('a')
        link.href = this.downloadUrl
        link.setAttribute('download', 'OCR客户端-解压后直接运行exe即可.zip')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
  
        this.$message({
          message: '开始下载软件包，请稍候...',
          type: 'success',
          duration: 3000
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .main-title {
    font-size: 24px;
    margin-bottom: 30px;
    text-align: center;
    color: #8e44ad;
  }
  
  .download-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
  }
  
  .version-info {
    margin-top: 10px;
    color: #666;
    font-size: 14px;
  }
  
  h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .content-section {
    margin-top: 20px;
  }
  
  p {
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 1.6;
  }
  
  .feature-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
  }
  
  .feature-list li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
  }
  </style>